<template>
  <div class="com-web-tool-short-connection">
    <br />
    <a-card :bordered="false" title="短连接" dis-hover>
      <a-row>
        <a-col span="2">短连接</a-col>
        <a-col span="22">
          <a-button class="btn" type="primary" size="small" @click="showClick(0)">Redis</a-button>
          <a-button class="btn" type="primary" size="small" @click="showClick(1)">MongoDB</a-button>
        </a-col>
      </a-row>
    </a-card>
    <w-modal
      ref="WModal"
      :ok-type="imgData ? 'danger' : 'primary'"
      :ok-text="imgData ? '清 除' : '确 定'"
      :title="`${showType ? 'MongoDB' : 'Redis'} 【缓存一天，仅供学习使用】`"
      @ok="okBtnClick"
    >
      <a-form :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }">
        <a-form-item label="链接">
          <a-input v-model="inputData" :rows="3" type="textarea" placeholder="请输入链接" />
        </a-form-item>
        <a-form-item label="长度">
          <a-select v-model="length" style="width: 120px">
            <a-select-option v-for="item in lengthArr" :key="item" :value="item">{{ item }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-if="shortConnection" label="短连接">
          <a-popover>
            <template slot="content">
              <img v-if="imgData" slot="content" :src="imgData" style="max-width: 500px" alt />
            </template>
            <a :href="shortConnection" target="_blank">{{ shortConnection }}</a>
          </a-popover>
          <a-icon class="w-pointer" type="copy" @click="copyClick" />
          <br />
        </a-form-item>
      </a-form>
    </w-modal>
  </div>
</template>

<script lang="ts">
import QRCode from "qrcode";
import { Vue, Component } from "vue-property-decorator";
import { ShortConnection } from "@/config/api";
import WModal, { ModalComType } from "@/components/global/modal";

@Component({
  components: {
    WModal,
  },
})
export default class ComWebToolShortConnection extends Vue {
  /**
   * 长度数组
   */
  lengthArr = [5, 6, 7, 8, 9, 10];
  /**
   * 显示状态 0: redis 1: MongoDB
   */
  showType = 0;
  /**
   * 输入的数据
   */
  inputData = "";
  /**
   * 输入的长度
   */
  length = 5;
  /**
   * 短连接
   */
  shortConnection = "";
  /**
   * 图片数据
   */
  imgData = "";

  /**
   * 显示按钮点击
   * @param showType 显示类型
   */
  showClick(showType: any) {
    this.inputData = "";
    this.shortConnection = "";
    this.length = 5;
    this.showType = showType;
    this.imgData = "";
    (this.$refs.WModal as ModalComType).show();
  }

  /**
   * 确定按钮点击
   */
  okBtnClick() {
    if (this.imgData) {
      this.inputData = "";
      this.imgData = ''
      this.shortConnection = "";
      return;
    }
    // eslint-disable-next-line no-useless-escape
    const reg = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/;
    if (!reg.test(this.inputData)) {
      this.$message.error("请输入有效的链接");
      return;
    }
    const { redis, mongo } = ShortConnection;
    this.$wAxios
      .$get(this.showType ? mongo : redis, {
        url: this.inputData,
        length: this.length,
      })
      .then((data) => {
        this.shortConnection = data;
        QRCode.toDataURL(data)
          .then((url: string) => {
            this.imgData = url;
          })
          .catch(() => {});
      });
  }

  /**
   * 拷贝按钮点击
   */
  copyClick() {
    this.$wCopy(this.shortConnection);
  }
}
</script>

<style scoped lang="less"></style>
